<template>
  <div
    class="question"
  >
    <div class="question-title">
      <div class="title">
        <VHtml
          tag="h3"
          class="title-content"
          :html="question.QuestionName"
        />
      </div>
    </div>
    <OptionList
      :user-select="userAnswer"
      :option-list="question.OptionList"
      :is-radio="isRadio"
      :question-type="question.QuestionTypeId"
      :show-answer="showAnswer"
      :question-id="question.QuestionId"
      :index="swiperIndex"
      @input="onOptionChange"
    />
    <AnswerAndAnalysis
      v-if="showAnswer"
      :question="question"
      :abcd-answer="ABCDAnswer"
      :right-answer="RightAnswer"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { SET_QUESTION } from '@/store/mutations'
export default Vue.extend({
  components: {
    OptionList: () => import('./OptionList.vue'),
    VHtml: () => import('components/VHtml.vue'),
    // eslint-disable-next-line vue/no-unused-components
    AnswerAndAnalysis: () => import('components/Exam/AnswerAndAnalysis.vue'),
  },
  props: {
    question: {
      type: Object,
      default: () => ({}),
    },
    shouldShowAnswer: {
      type: Boolean,
      default: false,
    },
    swiperIndex: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      optionNames: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      // difficultyNames: ['无', '简单', '一般', '困难'],
      // userId: this.$store.state.userInfo.UserId,
      // isCollected: this.question.IsCollection,
      // isCollecting: false,
      userAnswer: '' as any,
      isAnswerShow: false,
      isRadio: false,
      RightAnswer: '',
    }
  },
  computed: {
    showAnswer (): boolean {
      // eslint-disable-next-line eqeqeq
      return this.shouldShowAnswer || this.isAnswerShow
    },
    ABCDAnswer (): string {
      const { OptionList } = this.question as Question
      if (this.isRadio) {
        if (!this.userAnswer) {
          return ''
        }
        for (let i = 0, l = OptionList.length; i < l; i++) {
          if (OptionList[i].OptionId === this.userAnswer) {
            return this.optionNames[i]
          }
        }
        return ''
      } else {
        if (this.userAnswer.length === 0) {
          return ''
        }
        const answer: string[] = []
        for (let i = 0, l = OptionList.length; i < l; i++) {
          if (this.userAnswer.indexOf(OptionList[i].OptionId) !== -1) {
            answer.push(this.optionNames[i])
          }
        }
        return answer.join(',')
      }
    },
  },
  beforeUpdate () {
    this.onInit()
  },
  created () {
    this.onInit()
  },
  methods: {
    onInit () {
      let userAnswer
      let isRadio = [1, 3, 4, 5, 10].includes(this.question.QuestionTypeId)
      if (!isRadio && (this.question.QuestionTypeId === 6 || this.question.QuestionTypeId === 7)) {
        isRadio = (this.question.OptionList as any[]).reduce((prevCount: number, opt) => {
          return prevCount + (opt.IsRight ? 1 : 0)
        }, 0) === 1
      }
      let hasAnswer = false
      if (isRadio) {
        // userAnswer = this.question.ChoosedOptionId ? this.question.ChoosedOptionId[0] : ''
        userAnswer = this.question.UserAnswer[0]
        userAnswer && (hasAnswer = true)
      } else {
        // userAnswer = this.question.ChoosedOptionId[0] ? this.question.ChoosedOptionId : []
        userAnswer = this.question.UserAnswer[0] ? this.question.UserAnswer : []
        userAnswer[0] && (hasAnswer = true)
      }
      this.isRadio = isRadio
      this.isAnswerShow = this.shouldShowAnswer && hasAnswer
      this.$set(this.$data, 'userAnswer', userAnswer)

      let RightAnswer = []
      if (isRadio) {
        for (let i = 0; i < this.question.OptionList.length; i++) {
          if (this.question.OptionList[i].IsRight) {
            this.RightAnswer = this.optionNames[i]
          }
        }
      } else {
        for (let i = 0; i < this.question.OptionList.length; i++) {
          if (this.question.OptionList[i].IsRight) {
            RightAnswer.push(this.optionNames[i])
          }
        }
        this.RightAnswer = RightAnswer.join(',')
      }
      // this.$store.commit(SET_QUESTION, {
      //   index: this.swiperIndex,
      //   question: {
      //     QuestionId: this.question.QuestionId,
      //     RightAnswer: this.RightAnswer,
      //   },
      // })
    },
    onOptionChange (ans: any) {
      this.userAnswer = ans
      // 0.未做，1.正确，2.错误
      let IsRight = 0
      let UserAnswer = ans
      if (this.RightAnswer === this.ABCDAnswer) {
        IsRight = 1
      } else {
        IsRight = 2
      }

      this.$store.commit(SET_QUESTION, {
        index: this.swiperIndex,
        question: {
          QuestionId: this.question.QuestionId,
          IsRight,
          UserAnswer: this.isRadio ? [UserAnswer] : UserAnswer,
        },
      })
      if (this.isRadio) {
        UserAnswer = [ans]
        // eslint-disable-next-line eqeqeq
        if (this.shouldShowAnswer) {
          this.isAnswerShow = true
        }
        this.$emit('nextSwiper')
      } else {
        if (ans.length === 0) {
          IsRight = 0
        }
      }

      this.$emit('stateChange', {
        UserAnswer,
        IsRight,
        /**
         * 0：多选题不显示答案
         * 1: 错题、收藏等显示答案状态
         * 2：其他状态显示答案状态
         */
        showAnswer: this.shouldShowAnswer ? this.isRadio ? 1 : 0 : 2,
      })
    },
    onShowAnswer () {
      this.isAnswerShow = true
      this.$emit('stateChange', {
        /**
         * 0：多选题不显示答案
         * 1: 错题、收藏等显示答案状态
         * 2：其他状态显示答案状态
         */
        showAnswer: 1,
      })
    },
  },
})
interface Question {
  AllCount: number
  AllStatistics: string
  Difficulty: number
  ErrorCount: number
  IsCollection: false
  // 1.正确，2.错误，3空（未做）
  IsRight: number
  OptionList: any[]
  PointList: any[]
  QuestionAnalyseImgList: any[]
  QuestionAnalysis: string
  QuestionContent: string
  QuestionId: string
  QuestionImgList: any[]
  QuestionScore: number
  QuestionSourceType: number
  RightAnswer: string
  RightRate: number
  UserAllCount: number
  UserAnswer: string[]
  UserEnglishAnswer: string[]
  UserErrorCount: number
}
</script>

<style lang="scss" scoped>
.question {
  padding: 30px 40px;
}
.subtype-line {
  height: 1px;
  background-color: #E0E0E0;
  margin: 30px 0;
}
.question-title {
  display: table;
  width: 100%;
  margin-bottom: 40px;
  .title, .actions {
    display: table-cell;
  }
  .title {
    width: 100%;
    /deep/ img {
      max-width: 100%;
    }
    /deep/ table {
      width: 100%;
      margin: 20px 0;
      td, th {
        // border: 1px solid #ddd;
        border-color: #ddd;
        border-width: 2px;
        border-style: solid;
        padding: 5px 10px;
      }
      caption {
        // border: 1px solid;
        @include px1border(all, #ddd);
        border-bottom: 0;
        text-align: center;
      }
    }
  }
  .actions {
    padding-left: 20px;
    white-space: nowrap;
  }
}
.composite-title {
  margin: 30px 0;
}
.composite-title-content {
  font-size: 30px;
  color: #333;
  text-align: left;
}
.title-content {
  font-size: 30px;
  line-height: 1.5;
  color: #333;
  text-align: left;
  word-wrap: break-word;
  word-break: break-all;
  /deep/ img {
    max-width: 100%;
    margin-top: 30px;
    display: block;
  }
  /deep/ table {
    width: 100%;
    margin: 20px 0;
    td, th {
      // border: 1px solid #ddd;
      border-color: #ddd;
      border-width: 2px;
      border-style: solid;
      padding: 5px 10px;
    }
    caption {
      // border: 1px solid;
      @include px1border(all, #ddd);
      border-bottom: 0;
      text-align: center;
    }
  }
}
.collect {
  cursor: pointer;
  color: #999;
  font-size: 12px;
  min-width: 65px;
  text-align: center;
  .icon-xingxing {
    font-size: 17px;
  }
  .icon-shoucang {
    font-size: 17px;
  }
  .collected {
    vertical-align: middle;
    display: none;
    margin-bottom: 5px;
  }
  .not-collect {
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 5px;
  }
}
.is-collected {
  color: $error-app;
  .collected {
    display: inline-block;
  }
  .not-collect {
    display: none;
  }
}

.title-pics {
  margin: 10px 0 15px 17px;
}
.title-pics1 {
  margin-left: 26px;
}
.title-pics2 {
  margin-left: 35px;
}
.title-pics3 {
  margin-left: 44px;
}
.title-pic {
  max-width: 100%;
  margin-right: 15px;
  margin-bottom: 20px;
  vertical-align: top;
}
.title-pic:last-child {
  margin-bottom: 0;
}
.bottom-btn {
  margin: 0 0 20px 28px;
}

</style>
